﻿@page "/diagramcomponent/fishbone-diagram"

@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample visually represents a simple fishbone diagram in Syncfusion Blazor. Diagram nodes and annotations are used to define fishbone diagrams.</p>
</SampleDescription>
<ActionDescription>
    <p>This sample shows how to create a fishbone diagram (Ishikawa) using the Diagram control. Here, zoom and pan options are enabled.The <code class="language-text">Tool</code> property of the Diagram control allows you to enable or disable zoom and pan options. Read-only mode is enabled here.</p>
</ActionDescription>
<div>
    <div id="diagram-space" class="content-wrapper" style="height:700px">
        <SfDiagramComponent Height="700px" @ref="@Diagram" Nodes="@NodeCollection" Connectors="@ConnectorCollection" Tool="@DiagramTools.ZoomPan">
            <SnapSettings Constraints="@SnapConstraints.None"></SnapSettings>
        </SfDiagramComponent>
    </div>
</div>

@code{
    SfDiagramComponent Diagram;
    //Defines Diagram's nodes collection
    public DiagramObjectCollection<Node> NodeCollection { get; set; }
    //Defines Diagram's connectors collection
    public DiagramObjectCollection<Connector> ConnectorCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new DiagramObjectCollection<Node>();


        #region BpmnShapeModel

        ShapeAnnotation EquipmentAnnot = new ShapeAnnotation() { Content = "Equipment", Style = { Color = "white" } };
        Node EquipmentNode = new Node()
        {
            ID = "Equipment",
            OffsetX = 300,
            OffsetY = 80,
            Width = 120,
            Height = 40,
            Style = new ShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new Path() { Type = Syncfusion.Blazor.Diagram.Shapes.Path, Data = "M 10 0 L 166 0 L 156 44 L 0 44 z" },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                EquipmentAnnot
            }
        };
        NodeCollection.Add(EquipmentNode);

        ShapeAnnotation EnvironmentAnnot = new ShapeAnnotation() { Content = "Environment", Style = { Color = "white" } };
        Node EnvironmentNode = new Node()
        {
            ID = "Environment",
            OffsetX = 450,
            OffsetY = 80,
            Width = 120,
            Height = 40,
            Style = new ShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new Path() { Type = Syncfusion.Blazor.Diagram.Shapes.Path, Data = "M 10 0 L 166 0 L 156 44 L 0 44 z" },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                EnvironmentAnnot
            }
        };
        NodeCollection.Add(EnvironmentNode);

        ShapeAnnotation PersonAnnot = new ShapeAnnotation() { Content = "Person", Style = { Color = "white" } };
        Node PersonNode = new Node()
        {
            ID = "Person",
            OffsetX = 600,
            OffsetY = 80,
            Width = 120,
            Height = 40,
            Style = new ShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new Path() { Type = Syncfusion.Blazor.Diagram.Shapes.Path, Data = "M 10 0 L 166 0 L 156 44 L 0 44 z" },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                PersonAnnot
            }
        };
        NodeCollection.Add(PersonNode);

        ShapeAnnotation MaterialsAnnot = new ShapeAnnotation() { Content = "Materials", Style = { Color = "white" } };
        Node MaterialsNode = new Node()
        {
            ID = "Materials",
            OffsetX = 300,
            OffsetY = 600,
            Width = 120,
            Height = 40,
            Style = new ShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new Path() { Type = Syncfusion.Blazor.Diagram.Shapes.Path, Data = "M 10 0 L 166 0 L 156 44 L 0 44 z" },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                MaterialsAnnot
            }
        };
        NodeCollection.Add(MaterialsNode);

        ShapeAnnotation MachineAnnot = new ShapeAnnotation() { Content = "Machine", Style = { Color = "white" } };
        Node MachineNode = new Node()
        {
            ID = "Machine",
            OffsetX = 450,
            OffsetY = 600,
            Width = 120,
            Height = 40,
            Style = new ShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new Path() { Type = Syncfusion.Blazor.Diagram.Shapes.Path, Data = "M 10 0 L 166 0 L 156 44 L 0 44 z" },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                MachineAnnot
            }
        };
        NodeCollection.Add(MachineNode);

        ShapeAnnotation MethodsAnnot = new ShapeAnnotation() { Content = "Method", Style = { Color = "white" } };
        Node MethodsNode = new Node()
        {
            ID = "Methods",
            OffsetX = 600,
            OffsetY = 600,
            Width = 120,
            Height = 40,
            Style = new ShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new Path() { Type = Syncfusion.Blazor.Diagram.Shapes.Path, Data = "M 10 0 L 166 0 L 156 44 L 0 44 z" },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
    {
                MethodsAnnot
            }
        };
        NodeCollection.Add(MethodsNode);

        ShapeAnnotation Ellipse1Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse1Node = new Node()
        {
            ID = "ellipse1",
            OffsetX = 290,
            OffsetY = 130,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse1Annot
            }
        };
        NodeCollection.Add(Ellipse1Node);

        ShapeAnnotation Ellipse2Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse2Node = new Node()
        {
            ID = "ellipse2",
            OffsetX = 323,
            OffsetY = 183,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse2Annot
            }
        };
        NodeCollection.Add(Ellipse2Node);

        ShapeAnnotation Ellipse3Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse3Node = new Node()
        {
            ID = "ellipse3",
            OffsetX = 354,
            OffsetY = 237,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse3Annot
            }
        };
        NodeCollection.Add(Ellipse3Node);

        ShapeAnnotation Ellipse4Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse4Node = new Node()
        {
            ID = "ellipse4",
            OffsetX = 440,
            OffsetY = 130,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse4Annot
            }
        };
        NodeCollection.Add(Ellipse4Node);

        ShapeAnnotation Ellipse5Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse5Node = new Node()
        {
            ID = "ellipse5",
            OffsetX = 470,
            OffsetY = 182,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse5Annot
            }
        };
        NodeCollection.Add(Ellipse5Node);

        ShapeAnnotation Ellipse6Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse6Node = new Node()
        {
            ID = "ellipse6",
            OffsetX = 590,
            OffsetY = 130,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse6Annot
            }
        };
        NodeCollection.Add(Ellipse6Node);

        ShapeAnnotation Ellipse7Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse7Node = new Node()
        {
            ID = "ellipse7",
            OffsetX = 622,
            OffsetY = 179,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse7Annot
            }
        };
        NodeCollection.Add(Ellipse7Node);

        ShapeAnnotation Ellipse8Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse8Node = new Node()
        {
            ID = "ellipse8",
            OffsetX = 660,
            OffsetY = 221,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse8Annot
            }
        };
        NodeCollection.Add(Ellipse8Node);

        ShapeAnnotation Ellipse9Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse9Node = new Node()
        {
            ID = "ellipse9",
            OffsetX = 694,
            OffsetY = 264,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse9Annot
            }
        };
        NodeCollection.Add(Ellipse9Node);

        ShapeAnnotation Ellipse10Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse10Node = new Node()
        {
            ID = "ellipse10",
            OffsetX = 354,
            OffsetY = 460,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse10Annot
            }
        };
        NodeCollection.Add(Ellipse10Node);

        ShapeAnnotation Ellipse11Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse11Node = new Node()
        {
            ID = "ellipse11",
            OffsetX = 590,
            OffsetY = 530,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse11Annot
            }
        };
        NodeCollection.Add(Ellipse11Node);

        ShapeAnnotation Ellipse12Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse12Node = new Node()
        {
            ID = "ellipse12",
            OffsetX = 660,
            OffsetY = 460,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse12Annot
            }
        };
        NodeCollection.Add(Ellipse12Node);

        ShapeAnnotation Ellipse13Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse13Node = new Node()
        {
            ID = "ellipse13",
            OffsetX = 440,
            OffsetY = 530,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse13Annot
            }
        };
        NodeCollection.Add(Ellipse13Node);

        ShapeAnnotation Ellipse14Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse14Node = new Node()
        {
            ID = "ellipse14",
            OffsetX = 510,
            OffsetY = 460,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse14Annot
            }
        };
        NodeCollection.Add(Ellipse14Node);

        ShapeAnnotation Ellipse15Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Ellipse15Node = new Node()
        {
            ID = "ellipse15",
            OffsetX = 290,
            OffsetY = 530,
            Width = 20,
            Height = 20,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Ellipse15Annot
            }
        };
        NodeCollection.Add(Ellipse15Node);

        ShapeAnnotation ColorEllipse1Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node ColorEllipse1Node = new Node()
        {
            ID = "Colorellipse1",
            OffsetX = 717,
            OffsetY = 310,
            Width = 50,
            Height = 50,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                ColorEllipse1Annot
            }
        };
        NodeCollection.Add(ColorEllipse1Node);

        ShapeAnnotation ColorEllipse2Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node ColorEllipse2Node = new Node()
        {
            ID = "Colorellipse2",
            OffsetX = 560,
            OffsetY = 310,
            Width = 50,
            Height = 50,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                ColorEllipse2Annot
            }
        };
        NodeCollection.Add(ColorEllipse2Node);

        ShapeAnnotation Colorellipse3Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Colorellipse3Node = new Node()
        {
            ID = "Colorellipse3",
            OffsetX = 390,
            OffsetY = 310,
            Width = 50,
            Height = 50,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Colorellipse3Annot
            }
        };
        NodeCollection.Add(Colorellipse3Node);

        ShapeAnnotation Colorellipse4Annot = new ShapeAnnotation() { Content = "", Style = { Color = "white" } };
        Node Colorellipse4Node = new Node()
        {
            ID = "Colorellipse4",
            OffsetX = 220,
            OffsetY = 310,
            Width = 50,
            Height = 50,
            Style = new ShapeStyle() { StrokeColor = "#A52A2A" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Colorellipse4Annot
            }
        };
        NodeCollection.Add(Colorellipse4Node);

        ShapeAnnotation Colorellipse5Annot = new ShapeAnnotation() { Content = "Productivity Increase", Style = { Color = "white" } };
        Node Colorellipse5Node = new Node()
        {
            ID = "Colorellipse5",
            OffsetX = 900,
            OffsetY = 310,
            Width = 140,
            Height = 90,
            Style = new ShapeStyle() { Fill = "#39AFA9", StrokeColor = "05776C" },
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Ellipse },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
                Colorellipse5Annot
            }
        };
        NodeCollection.Add(Colorellipse5Node);

        Node TextprogramsNode = new Node()
        {
            ID = "TextPrograms",
            OffsetX = 189,
            OffsetY = 130,
            Width = 90,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Text Programs",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(TextprogramsNode);

        Node VentilatorssoundNode = new Node()
        {
            ID = "Ventilatorssound",
            OffsetX = 359,
            OffsetY = 130,
            Width = 120,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Ventilators Sound",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(VentilatorssoundNode);

        Node EducationNode = new Node()
        {
            ID = "Education",
            OffsetX = 500,
            OffsetY = 130,
            Width = 70,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Education",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(EducationNode);

        Node DatabooksNode = new Node()
        {
            ID = "DataBooks",
            OffsetX = 213,
            OffsetY = 183,
            Width = 70,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="DataBooks",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(DatabooksNode);

        Node FixturesNode = new Node()
        {
            ID = "Fixtures",
            OffsetX = 240,
            OffsetY = 237,
            Width = 70,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Fixtures",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(FixturesNode);

        Node NoiseNode = new Node()
        {
            ID = "Noise",
            OffsetX = 390,
            OffsetY = 182,
            Width = 70,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Noise",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(NoiseNode);

        Node MotivationNode = new Node()
        {
            ID = "Motivation",
            OffsetX = 535,
            OffsetY = 182,
            Width = 70,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Motivation",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(MotivationNode);

        Node TirednessNode = new Node()
        {
            ID = "Tiredness",
            OffsetX = 565,
            OffsetY = 224,
            Width = 70,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Tiredness",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(TirednessNode);

        Node StorerNode = new Node()
        {
            ID = "Storer",
            OffsetX = 606,
            OffsetY = 264,
            Width = 70,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Storer",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(StorerNode);

        Node ComputerNode = new Node()
        {
            ID = "Computer",
            OffsetX = 260,
            OffsetY = 460,
            Width = 70,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Computer",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(ComputerNode);

        Node QualityNode = new Node()
        {
            ID = "Quality",
            OffsetX = 417,
            OffsetY = 460,
            Width = 70,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Quality of Element",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(QualityNode);

        Node OrderNode = new Node()
        {
            ID = "Order",
            OffsetX = 562,
            OffsetY = 460,
            Width = 70,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Order",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(OrderNode);

        Node SoftwareNode = new Node()
        {
            ID = "Software",
            OffsetX = 225,
            OffsetY = 530,
            Width = 70,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Software",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(SoftwareNode);

        Node ProcurementNode = new Node()
        {
            ID = "Procurement",
            OffsetX = 358,
            OffsetY = 530,
            Width = 70,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Procurement",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(ProcurementNode);

        Node StandardizationNode = new Node()
        {
            ID = "Standardization",
            OffsetX = 501,
            OffsetY = 530,
            Width = 90,
            Height = 20,
            Style = new ShapeStyle() { Fill = "transparent", StrokeWidth = 0 },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
                new ShapeAnnotation()
                {
                    Content="Standardization",
                    Style=new TextShapeStyle(){Color="Black"}
                }
            }

        };
        NodeCollection.Add(StandardizationNode);


        ConnectorCollection = new DiagramObjectCollection<Connector>();
        CreateConnector("equipellise", "5,5", "Equipment", "ellipse1", "#A52A2A", 2);
        CreateConnector("connect12", "5,5", "ellipse1", "ellipse2", "#A52A2A", 2);
        CreateConnector("connect13", "5,5", "ellipse2", "ellipse3", "#A52A2A", 2);
        CreateConnector("connect14", "5,5", "ellipse3", "Colorellipse3", "#A52A2A", 2);
        CreateConnector("connect15", "5,5", "Environment", "ellipse4", "#A52A2A", 2);
        CreateConnector("connect16", "5,5", "ellipse4", "ellipse5", "#A52A2A", 2);
        CreateConnector("connect17", "5,5", "ellipse4", "ellipse5", "#A52A2A", 2);
        CreateConnector("connect18", "5,5", "ellipse5", "Colorellipse2", "#A52A2A", 2);
        CreateConnector("connect19", "5,5", "Person", "ellipse6", "#A52A2A", 2);
        CreateConnector("connect20", "5,5", "ellipse6", "ellipse7", "#A52A2A", 2);
        CreateConnector("connect21", "5,5", "ellipse7", "ellipse8", "#A52A2A", 2);
        CreateConnector("connect22", "5,5", "ellipse8", "ellipse9", "#A52A2A", 2);
        CreateConnector("connect23", "5,5", "ellipse9", "Colorellipse1", "#A52A2A", 2);
        CreateConnector("connect24", "5,5", "Materials", "ellipse15", "#A52A2A", 2);
        CreateConnector("connect25", "5,5", "ellipse15", "ellipse10", "#A52A2A", 2);
        CreateConnector("connect26", "5,5", "ellipse10", "Colorellipse3", "#A52A2A", 2);
        CreateConnector("connect27", "5,5", "Machine", "ellipse13", "#A52A2A", 2);
        CreateConnector("connect28", "5,5", "ellipse13", "ellipse14", "#A52A2A", 2);
        CreateConnector("connect29", "5,5", "ellipse14", "Colorellipse2", "#A52A2A", 2);
        CreateConnector("connect30", "5,5", "Methods", "ellipse11", "#A52A2A", 2);
        CreateConnector("connect31", "5,5", "ellipse11", "ellipse12", "#A52A2A", 2);
        CreateConnector("connect32", "5,5", "ellipse12", "Colorellipse1", "#A52A2A", 2);
        CreateConnector("connect33", "", "Colorellipse4", "Colorellipse3", "#000000", 2);
        CreateConnector("connect34", "", "Colorellipse3", "Colorellipse2", "#000000", 2);
        CreateConnector("connect35", "", "Colorellipse2", "Colorellipse1", "#000000", 2);
        CreateConnector("connect36", "", "Colorellipse1", "Colorellipse5", "#000000", 2);
        CreateConnector("connect37", "5,5", "TextPrograms", "ellipse1", "#A52A2A", 2);
        CreateConnector("connect38", "5,5", "DataBooks", "ellipse2", "#A52A2A", 2);
        CreateConnector("connect39", "5,5", "Fixtures", "ellipse3", "#A52A2A", 2);
        CreateConnector("connect40", "5,5", "Ventilatorssound", "ellipse4", "#A52A2A", 2);
        CreateConnector("connect41", "5,5", "Noise", "ellipse5", "#A52A2A", 2);
        CreateConnector("connect42", "5,5", "Education", "ellipse6", "#A52A2A", 2);
        CreateConnector("connect43", "5,5", "Motivation", "ellipse7", "#A52A2A", 2);
        CreateConnector("connect44", "5,5", "Tiredness", "ellipse8", "#A52A2A", 2);
        CreateConnector("connect45", "5,5", "Storer", "ellipse9", "#A52A2A", 2);
        CreateConnector("connect46", "5,5", "Software", "ellipse15", "#A52A2A", 2);
        CreateConnector("connect47", "5,5", "Computer", "ellipse10", "#A52A2A", 2);
        CreateConnector("connect48", "5,5", "Procurement", "ellipse13", "#A52A2A", 2);
        CreateConnector("connect49", "5,5", "Quality", "ellipse14", "#A52A2A", 2);
        CreateConnector("connect50", "5,5", "Order", "ellipse12", "#A52A2A", 2);
        CreateConnector("connect51", "5,5", "Standardization", "ellipse11", "#A52A2A", 2);
    }
    // Method is used to create a Connector for the diagram.
    private void CreateConnector(string id, string lineDashArray, string source, string target, string lineColor, int lineWidth)
    {
        Connector Connector = new Connector()
        {
            ID = id,
            SourceID = source,
            TargetID = target,
            Style = new ShapeStyle { StrokeColor = lineColor, StrokeWidth = lineWidth, StrokeDashArray = lineDashArray },
            TargetDecorator = new Decorator() { Shape = DecoratorShapes.Arrow, Width = 5, Height = 5 }

        };
        if (id != "connect33" && id != "connect34" && id != "connect35" && id != "connect36")
        {
            Connector.TargetDecorator.Style = new ShapeStyle() { StrokeColor = "#A52A2A", Fill = "#A52A2A" };
        }

        ConnectorCollection.Add(Connector);
    }
    #endregion
}







